<template>
	<view>
		<!-- 搜索页面
		 1：刚开始显示搜索历史
		 2：点击搜索后显示搜索的结果
		 定义一个数组保存搜索后的数组searchList 点击搜索后v-if判断searchList是否.length===0 是显示搜索历史
		 否则显示搜索后的结果
		 注意：点击搜索的事件： 监听点击搜索--页面的生命周期
		onNavigationBarButtonTap
		搜索时关闭键盘
		// 关闭键盘
		uni.hideKeyboard();
		 -->
		<template v-if="searchList.length===0">
			<view class="py-2 font-md">
				搜索历史
			</view>
			<view class="flex flex-wrap">
				<view class="border rounded font mx-1 px-3  my-1 " v-for="(item,index) in list" :key="index" @click="clickSearchHistory(item)">
					{{item}}
				</view>
			</view>
		</template>
		<!-- 点击搜索后的数据列表 -->
	<template v-else>
		<block v-for="(item,index) in searchList":key="index">
			<common-list :item="item" :index="index"></common-list>
		</block>
	</template>
	</view>
</template>

<script>
	// 模拟的虚拟数据
	const demo = [{
			username: "昵称",
			userpic: "/static/topboy.png", //头像
			newstime: "2020-12-10下午4.30", //时间
			isFollow: false, //判断当前用户是否已经关注
			title: "我是标题", //标题
			titlepic: "/static/demo/banner2.jpg", //标题下的图片
	
			support: {
				// 点赞 反赞
				type: "",
				support_count: 0,
				unsupport_count: 0,
			},
			// 评论
			comment_count: 0,
			// 分享
			share_num: 0,
		},
		{
			username: "昵称",
			userpic: "/static/topboy.png", //头像
			newstime: "2020-12-10下午4.30", //时间
			isFollow: false, //判断当前用户是否已经关注
			title: "我是标题", //标题
			support: {
				// 点赞 反赞
				type: "",
				support_count: 0,
				unsupport_count: 0,
			},
			// 评论
			comment_count: 0,
			// 分享
			share_num: 0,
		},
	];
	// 引入列表内容组件
	import CommonList from '@/components/common/common-list.vue'
	export default {
		components:{CommonList},
 		data() {
			return {
				searchText: "",
				list: ["uniapp交友实战第一季", "仿小米商城第二季", "微信实战第三季", ],
				searchList:[],
			}
		},
		// 监听输入
		onNavigationBarSearchInputChanged(e) {
			console.log(e)
			this.searchText = e.text
		},
		// 监听点击搜索--页面的生命周期
		onNavigationBarButtonTap(e) {
			console.log(e)
			if (e.index === 0) { //点击的是搜索
				this.searchEvent()//发起搜索请求
			}
		},
		methods: {
			clickSearchHistory(name){
				this.searchText=name;
				console.log(name);
				this.searchEvent()
			},
			searchEvent(){
				// 发送搜索请求说明键盘输入完毕
				// 关闭键盘
				uni.hideKeyboard();
				// 加载模态框
				uni.showLoading({
					title:'搜索中...',
					mask:true
				});
				// 请求搜索
				setTimeout(()=>{
					this.searchList=demo;
					// 搜索到数据结束加载模态框
					uni.hideLoading();
				},2000)
			}
			
		},
	}
</script>

<style>

</style>
